
import React, { Suspense } from 'react'
import { RouteObject } from 'react-router-dom'

const App = React.lazy(() => import('@/views/App'))
const GlobalLoading = React.lazy(() => import('@/components/GlobalLoading'))
const HomePage = React.lazy(() => import('@/views/home/index'))
const NotFound = React.lazy(() => import('@/views/error/404.tsx'))

const routes: RouteObject[] = [
  {
    path: '/',
    // element: <App />,
    element: <Suspense fallback={
      <GlobalLoading></GlobalLoading>
    }>{ <App /> }</Suspense>,
    // element: <Suspense fallback={<div>loading...</div>}><App /></Suspense>,
    children: [
      {
        path: '/home',
        element: <Suspense fallback={<GlobalLoading></GlobalLoading>}><HomePage /></Suspense>
        // element: <HomePage />
      },
      // {
      //   path: '/feedback',
      //   element: <Feedback />
      // },
      {
        path: '*',
        element: <NotFound></NotFound>
      }
    ]
  },
]

export default routes